<template>
	<view class="detail">
		<!--  轮播图 -->
		<swiper :indicator-dots="true" :autoplay="true" circular :interval="3000" :duration="1000">
			<block v-for="(item,index) in details.pics" :key='index'>
				<swiper-item>
					<image @click="showImage(index)" :src="item.pics_big" mode=""></image>
				</swiper-item>
			</block>
		</swiper>

		<!-- 商品名称 及价格-->
		<view class="word">
			<view class="money">
				￥{{details.goods_price}}
			</view>
			<view class="center">
				<view class="left hide">
					{{details.goods_name}}
				</view>
				<view class="line">
				</view>
				<view class="right">
					<text class="iconfont icon-shoucang"></text>
					<text>收藏</text>
					<button type="default" class="share" open-type="share">收藏</button>
				</view>
			</view>
			<view class="bottom">
				快递: 免运费
			</view>
		</view>

		<!-- 促销 -->
		<view class="other">
			<view class="top">
				<text>促销</text>
				<text class="backRed">满三百减30元</text>
			</view>
			<view class="top">
				<text>
					已选
				</text>
				<text class="backHui">黑色/S/1件</text>
			</view>
		</view>
		<!-- 送至 -->
		<view class="other">
			<view class="top">
				<text>
					送至
				</text>
				<text class="backHui">广州省 广州市 珠海区 ></text>
			</view>
		</view>

		<!-- 图文介绍区域 -->
		<view class="tuwen">
			<view class="title">
				<view class="item" :class="{active:cureIndex === 0 }" @click="chang(0)">
					图文介绍
				</view>
				<view class="item" :class="{active:cureIndex === 1 }" @click="chang(1)">
					规格参数
				</view>
			</view>
			<view class="comment">
				<view class="one" v-if="cureIndex === 0" v-html="details.goods_introduce">
					图文
				</view>
				<view class="two" v-else>
					<view class="row" v-for=" (item,index) in details.attrs" :key="index">
						<view class="col">
							{{ item.attr_name }}
						</view>
						<view class="col">
							{{ item.attr_value }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="p1">
				<text class="iconfont icon-kefu"></text>
				<text>联系客服</text>
				<button class="contact" type="default" open-type="contact">联系客服</button>
			</view>
			<view class="p1" @click="myCart">
				<text class="iconfont icon-aui-icon-cart"></text>
				<text>购物车</text>
			</view>
			<view class="addto" @click="addCart" style="background-color: #ffb400;">
				加入购物车
			</view>
			<view class="addto" style="background-color: #ff2d4a;">
				立即购买
			</view>
		</view>
	</view>
</template>

<script>
	import {
		goodsDetail
	} from "../../api/detaills.js"
	export default {
		data() {
			return {
				cureIndex: 0, // 导航索引
				id: '', // 详情id
				details: '', // 文章详情
				cartList: [] // 购物车数据
			}
		},
		async onLoad(option) {
			this.id = option.id
			const res = await goodsDetail(this.id)
			console.log(res)
			this.details = res.data.message

		},
		onShow() {
			//取出缓存中的数据
			this.cartList =  uni.getStorageSync('cart')||[]
		},

		// 分享事件
		onShareAppMessage() {
			console.log(this.details)
			return {
				title: "小可爱，我不爱你了",
				imageUrl: this.details.pics[0].pics_big // 图片路径
			}
		},
		methods: {
			// 添加到购物车
			addCart() {
				// 看是不是有  有的index就不会等于-1   会retrun所在数组的当前索引
				let index = this.cartList.findIndex(item=>{
					 return this.id===item.goods_id
				})
				// 判断是不是第一次
				console.log(index)
				if(index !== -1){
					// num就+1
					this.cartList[index].num += 1;
				}else{
					this.cartList.unshift({
						goods_id: this.id,
						num: 1,
						status: true
					})
				}
			
				uni.setStorageSync("cart", this.cartList);
				uni.showToast({
					title:"添加成功"
				})
			},
			//图片预览事件
			showImage(index) {
				// 得到轮播图的集合
				var imgArr = this.details.pics.map(item => {
					return item.pics_big
				})
				uni.previewImage({
					current: index, // 当前显示图片的http链接
					urls: imgArr // 需要预览的图片http链接列表
				})
			},
			// 图文介绍事件
			chang(index) {
				this.cureIndex = index
			},
			// 购物车的点击事件
			myCart() {
				uni.switchTab({
					url: "../cart/cart"
				})
			}
		}
	}
</script>

<style lang="less">
	.detail {
		margin-bottom: 100rpx;

		.backRed {
			color: #ff384d;
		}

		.backHui {
			color: #a0a0ab;
		}

		background-color: #f5f5f5;

		swiper {
			height: 720rpx;

			image {
				width: 100%;
				height: 720rpx;
			}
		}

		.word {
			padding-left: 20rpx;
			background-color: #FFFFFF;

			.money {
				line-height: 100rpx;
				font-size: 20px;
				color: #ff304c;
			}

			.center {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left {
					flex: 1;
					margin-right: 80rpx;
				}

				.line {
					width: 1rpx;
					height: 80rpx;
					background-color: #cccccc;
				}

				.right {
					position: relative;
					display: flex;
					flex-direction: column;
					text-align: center;
					width: 140rpx;
					color: #a9a8a9;

					.share {
						position: absolute;
						top: 0;
						left: 0;
						opacity: 0;
					}

				}
			}

			.bottom {
				line-height: 100rpx;
				color: #a1a1a1;
			}
		}

		.other {
			margin-top: 20rpx;
			padding-left: 20rpx;
			background-color: #FFFFFF;

			.top {
				line-height: 100rpx;

				text:nth-child(1) {
					margin-right: 40rpx;
				}
			}
		}

		.tuwen {
			margin-top: 20rpx;
			background-color: #FFFFFF;
			padding: 0 20rpx;

			.title {
				display: flex;
				text-align: center;

				.item {
					line-height: 90rpx;
					flex: 1;


					&.active {
						border-bottom: 10rpx solid #ff2c49;

					}
				}
			}

			.two {
				margin-top: 10rpx;
				border-left: 4rpx solid #d2d2d2;
				border-top: 4rpx solid #d2d2d2;

				.row {
					display: flex;

					.col {
						flex: 1;
						border-bottom: 4rpx solid #d2d2d2;
						border-right: 4rpx solid #d2d2d2;

						padding: 30rpx 0;
					}

					.col:nth-child(1) {
						text-align: center;
					}

					.col:nth-child(2) {
						padding-left: 40rpx;
						padding-right: 40rpx;
					}
				}
			}
		}

		.footer {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 80rpx;
			background-color: #FFFFFF;
			display: flex;

			.p1 {
				flex: 2;
				display: flex;
				flex-direction: column;
				text-align: center;
				font-size: 12px;
				position: relative;

				.contact {
					position: absolute;
					top: 0;
					left: 0;
					opacity: 0;
				}

				text:nth-child(1) {
					font-size: 20px;
				}
			}

			.addto {
				flex: 3;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				color: #FFFFFF;
			}
		}
	}
</style>
